$f1: var(--c-f1);
$f2: var(--c-f2);
$f3: var(--c-f3);
$f4: var(--c-f4);
$f5: var(--c-f5);
$f6: var(--c-f6);
$f7: var(--c-f7);
$f8: var(--c-f8);
$f9: var(--c-f9);
$a1: var(--c-a1);
$a2: var(--c-a2);
$a3: var(--c-a3);
$a4: var(--c-a4);
$a5: var(--c-a5);
$a6: var(--c-a6);
$f1r: var(--c-f1-r);
$f2r: var(--c-f2-r);
$f3r: var(--c-f3-r);
$f4r: var(--c-f4-r);
$f5r: var(--c-f5-r);
$f6r: var(--c-f6-r);
$f7r: var(--c-f7-r);
$f8r: var(--c-f8-r);
$f9r: var(--c-f9-r);
$a1r: var(--c-a1-r);
$a2r: var(--c-a2-r);
$a3r: var(--c-a3-r);
$a4r: var(--c-a4-r);
$a5r: var(--c-a5-r);
$a6r: var(--c-a6-r);

$f1-dark: var(--c-f1-dark);
$f1-light: var(--c-f1-light);
$s1-dark: var(--c-s1-dark);
$s1-light: var(--c-s1-light);
$a1-dark: var(--c-a1-dark);
$a1-light: var(--c-a1-light);
$a2-dark: var(--c-a2-dark);
$a2-light: var(--c-a2-light);
$a3-dark: var(--c-a3-dark);
$a3-light: var(--c-a3-light);
$a4-dark: var(--c-a4-dark);
$a4-light: var(--c-a4-light);
$a5-dark: var(--c-a5-dark);
$a5-light: var(--c-a5-light);
$a6-dark: var(--c-a6-dark);
$a6-light: var(--c-a6-light);

$f1-darkr: var(--c-f1-dark-r);
$f1-lightr: var(--c-f1-light-r);
$s1-darkr: var(--c-s1-dark-r);
$s1-lightr: var(--c-s1-light-r);
$a1-darkr: var(--c-a1-dark-r);
$a1-lightr: var(--c-a1-light-r);
$a2-darkr: var(--c-a2-dark-r);
$a2-lightr: var(--c-a2-light-r);
$a3-darkr: var(--c-a3-dark-r);
$a3-lightr: var(--c-a3-light-r);
$a4-darkr: var(--c-a4-dark-r);
$a4-lightr: var(--c-a4-light-r);
$a5-darkr: var(--c-a5-dark-r);
$a5-lightr: var(--c-a5-light-r);
$a6-darkr: var(--c-a6-dark-r);
$a6-lightr: var(--c-a6-light-r);

$a1-backdrop: var(--c-a1-backdrop);

$s1: var(--c-s1);

$radius: 4px;

$btn-sizes: (
  default: (
    padding: 0 12px,
    font-size: 14px,
    line-height: 34px,
  ),
  small: (
    padding: 0 10px,
    font-size: 12px,
    line-height: 30px,
  ),
  large: (
    padding: 0 16px,
    font-size: 18px,
    line-height: 46px,
  ),
);

$btn-types: (
  default: (
    border-color: $s1,
    background-color: $s1,
    outline: 0,
    color: $f8,
    x-a-hover: (
      z-index: 2,
      border-color: $s1-light,
      background-color: $s1-light,
    ),
    x-a-active: (
      z-index: 2,
      border-color: $s1-dark,
      background-color: $s1-dark,
    ),
    x-a-focus: (
      z-index: 2,
      border-color: $s1-dark,
      background-color: $s1-dark,
      box-shadow: 0 0 0 3px rgba($s1-darkr, 0.5),
    ),
    x-a-disabled: (
      opacity: 0.65,
      cursor: not-allowed,
      x-a-hover: (
        border-color: $s1,
        background-color: $s1,
      ),
      x-a-active: (
        border-color: $s1,
        background-color: $s1,
      ),
      x-a-focus: (
        border-color: $s1,
        background-color: $s1,
        box-shadow: none,
      ),
    ),
  ),
  light: (
    border-color: $f8,
    background-color: $f8,
    outline: 0,
    x-a-hover: (
      z-index: 2,
      border-color: $a1-light,
      background-color: $a1-light,
    ),
    x-a-active: (
      z-index: 2,
      border-color: $a1-dark,
      background-color: $a1-dark,
    ),
    x-a-focus: (
      z-index: 2,
      border-color: $a1-dark,
      background-color: $a1-dark,
      box-shadow: 0 0 0 3px rgba($a1-darkr, 0.5),
    ),
    x-a-disabled: (
      opacity: 0.65,
      cursor: not-allowed,
      x-a-hover: (
        border-color: $a6-light,
        background-color: $a6-light,
      ),
      x-a-active: (
        border-color: $a6-light,
        background-color: $a6-light,
      ),
      x-a-focus: (
        border-color: $a6-light,
        background-color: $a6-light,
        box-shadow: none,
      ),
    ),
  ),
  blank: (
    border-color: transparent,
    background-color: transparent,
    outline: 0,
    color: $a1,
    x-a-hover: (
      z-index: 2,
      border-color: transparent,
      background-color: transparent,
    ),
    x-a-active: (
      z-index: 2,
      border-color: transparent,
      background-color: transparent,
    ),
    x-a-focus: (
      z-index: 2,
      border-color: transparent,
      background-color: transparent,
    ),
    x-a-disabled: (
      opacity: 0.65,
      cursor: not-allowed,
      x-a-hover: (
        border-color: transparent,
        background-color: transparent,
      ),
      x-a-active: (
        border-color: transparent,
        background-color: transparent,
      ),
      x-a-focus: (
        border-color: transparent,
        background-color: transparent,
        box-shadow: none,
      ),
    ),
  ),
  primary: (
    color: $f8,
    border-color: $a4,
    background-color: $a4,
    outline: 0,
    x-a-hover: (
      z-index: 2,
      border-color: $a4-light,
      background-color: $a4-light,
    ),
    x-a-active: (
      z-index: 2,
      border-color: $a4-dark,
      background-color: $a4-dark,
    ),
    x-a-focus: (
      z-index: 2,
      border-color: $a4-dark,
      background-color: $a4-dark,
      box-shadow: 0 0 0 3px rgba($a4-darkr, 0.5),
    ),
    x-a-disabled: (
      opacity: 0.65,
      cursor: not-allowed,
      x-a-hover: (
        border-color: $a4-light,
        background-color: $a4-light,
      ),
      x-a-active: (
        border-color: $a4-light,
        background-color: $a4-light,
      ),
      x-a-focus: (
        border-color: $a4-light,
        background-color: $a4-light,
        box-shadow: none,
      ),
    ),
  ),
  success: (
    color: $f7,
    border-color: $a2,
    background-color: $a2,
    outline: 0,
    x-a-hover: (
      z-index: 2,
      // border-color: darken($a2, 10%),
      // background-color: darken($a2, 10%),,,,,,,,,,,
    ),
    x-a-active: (
      z-index: 2,
      // border-color: darken($a2, 15%),
      // background-color: darken($a2, 15%),,,,,,,,,,,
    ),
    x-a-focus: (
      z-index: 2,
      // border-color: darken($a2, 17%),
      // background-color: darken($a2, 15%),
      // box-shadow: 0 0 0 3px rgba(darken($a2, 17%), 0.5),,,,,,,,,,,
    ),
    x-a-disabled: (
      opacity: 0.65,
      cursor: not-allowed,
      x-a-hover: (
        border-color: $a2,
        background-color: $a2,
      ),
      x-a-active: (
        border-color: $a2,
        background-color: $a2,
      ),
      x-a-focus: (
        border-color: $a2,
        background-color: $a2,
        box-shadow: none,
      ),
    ),
  ),
  danger: (
    color: $f7,
    border-color: $a3,
    background-color: $a3,
    outline: 0,
    x-a-hover: (
      z-index: 2,
      // border-color: darken($a3, 10%),
      // background-color: darken($a3, 10%),,,,,,,,,,,
    ),
    x-a-active: (
      z-index: 2,
      // border-color: darken($a3, 15%),
      // background-color: darken($a3, 15%),,,,,,,,,,,
    ),
    x-a-focus: (
      z-index: 2,
      // border-color: darken($a3, 17%),
      // background-color: darken($a3, 15%),
      // box-shadow: 0 0 0 3px rgba(darken($a3, 17%), 0.5),,,,,,,,,,,
    ),
    x-a-disabled: (
      opacity: 0.65,
      cursor: not-allowed,
      x-a-hover: (
        border-color: $a3,
        background-color: $a3,
      ),
      x-a-active: (
        border-color: $a3,
        background-color: $a3,
      ),
      x-a-focus: (
        border-color: $a3,
        background-color: $a3,
        box-shadow: none,
      ),
    ),
  ),
);

$input-sizes: (
  default: (
    padding: 0 12px,
    font-size: 14px,
    line-height: 34px,
    height: 36px,
  ),
  small: (
    padding: 0 10px,
    font-size: 12px,
    line-height: 30px,
    height: 32px,
  ),
  large: (
    padding: 0 16px,
    font-size: 18px,
    line-height: 46px,
    height: 48px,
  ),
);

$input-types: (
  default: (
    border-color: $f6,
    outline: 0,
    background: $f8,
    x-a-focus: (
      z-index: 2,
      border-color: $a1,
      box-shadow: 0 0 0 2px rgba($a1r, 0.25),
    ),
    x-a-disabled: (
      background-color: $f7,
      cursor: not-allowed,
      color: $f4,
    ),
  ),
  error: (
    border-color: $a3,
    x-a-focus: (
      z-index: 2,
      border-color: $a3,
      box-shadow: 0 0 0 2px rgba($a3r, 0.25),
    ),
    x-a-disabled: (
      background-color: $f7,
      cursor: not-allowed,
      color: $f4,
    ),
  ),
);

$title-types: (
  h1: (
    font-size: 36px,
  ),
  h2: (
    font-size: 30px,
  ),
  h3: (
    font-size: 24px,
  ),
  h4: (
    font-size: 18px,
  ),
  h5: (
    font-size: 14px,
  ),
  h6: (
    font-size: 12px,
  ),
);

$content-types: (
  default: 1,
  small: 0.7,
  big: 1.2,
);

$grid-size: 12;
$grid-change: (
    min: 1024px,
  ),
  (
    min: 768px,
    max: 1024px,
    name: 1024,
  ),
  (
    min: 480px,
    max: 768px,
    name: 768,
  ),
  (
    max: 480px,
    name: 480,
  );
